<template>
  <div class="container">
    <div class="left">
      <i :class="[collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold' ,'iStyle']" @click="collapseChange"></i>
      <div class="breadCrumbStyle">
        <BreadCrumb/>
      </div>
    </div>
    <div class="right">
      <LanguageSelect></LanguageSelect>
      <UserAvatar></UserAvatar>
    </div>
  </div>
</template>

<script lang="ts">
  import {defineComponent, computed} from 'vue';
  import {useStore} from "vuex";
  import BreadCrumb from '@/components/main/components/header/BreadCrumbs.vue'
  import UserAvatar from '@/components/main/components/header/UserAvatar.vue'
  import LanguageSelect from '@/components/main/components/header/LanguageSelect.vue'
  export default defineComponent({
    name: 'Header',
    components:{
      BreadCrumb,
      LanguageSelect,
      UserAvatar
    },
    setup(){
      const store = useStore()
      let collapse = computed(() => {
        return store.state.app.collapse
      })
      const collapseChange = () => {
        store.commit('setCollapse')
      }
      return {
        collapse,
        collapseChange
      }
    },
  })
</script>

<style lang="scss" scoped>
  .container{
    width: 100%;
    height: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      i{
        font-size: 3rem;
        color: #888;
      };
      .breadCrumbStyle{
        margin-left: 1.6rem;
      }
    };
    .right{
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
</style>
